<script setup>
import { ref, reactive,onMounted } from 'vue'
import { setClipboard } from '@/utils/clipboard'
import shareModel from './shareModel.vue'
import remindModel from './remindModel.vue'
import detailsModel from './detailsModel.vue'
import { promotionlist,promotionshare,promotiondel,promotioninfo } from '@/api'
import { useRouter } from 'vue-router'
const emits = defineEmits(['changeActiveKey'])
const router = useRouter()
const tableList = ref([])
const dialogVisible = ref(false)
const detailsModels=ref()
const isEdit = ref(true)
//分享弹窗
const shareModelVisible = ref(false)
const showShareModel = (visible) => {
	shareModelVisible.value = visible
}
const handleCommand = (type) => {
	if (type === 'editRow') {
		editRow()
	} else {
		delRow()
	}
}
const editRow = () => {
	dialogVisible.value = true
	isEdit.value = true
}
const delRow = (val) => {
	// dialogVisible.value = true
	// isEdit.value = false
	ElMessageBox.confirm(
    '删除后不可恢复，确定删除吗？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
			promotiondel({id:val.id}).then(res=>{
				ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
			promotionlistapi()
			})
      
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
const shareModels = ref()
const valuedata = reactive(
	{
		url:'',
		image:''
	}
)
const copyLink = () => {
	setClipboard(
		valuedata.url
	)
}
const downloadCode = () => {
	downloadByBlob(valuedata.url)
	ElMessage({ message: '下载成功', type: 'success', duration: 1500 })
}
const downloadByBlob=(url, name)=>{
     //第一个参数是图片链接，第二个参数是图片名称
      let image = new Image();
      image.setAttribute('crossOrigin', 'anonymous');
      image.src = url;
      image.onload = () => {
        let canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob((blob) => {
          let url = URL.createObjectURL(blob);
          this.download(url, name);
          // 用完释放URL对象
          URL.revokeObjectURL(url);
        });
      };
    }
    const download=(href, name)=>{
      let eleLink = document.createElement('a');
      eleLink.download = name;
      eleLink.href = href;
      eleLink.click();
      eleLink.remove();
    }
const share = (row) => {
	// shareModels.value.show(row)
	
	// shareModelRef.value.showShareModel()
	
promotionshare({id:row.id}).then(res=>{
	valuedata.url=res.data.url
	valuedata.image=res.data.image
	console.log(valuedata.value)
	shareModelVisible.value = true
})
}
//提醒弹窗
const remindModelVisible = ref(false)
const showRemindModelVisible = (visible) => {
	remindModelVisible.value = visible
}
//详情弹窗
const detailsVisible = ref(false)
const showDetailsVisible = (visible) => {
	detailsVisible.value = visible
}
const todetails = (row) => {
	promotioninfo({id:row.id}).then(res=>{
		detailsModels.value.show(res.data)
	})
	detailsVisible.value = true
}
const activeName=ref('1')
const promotionlistapi=()=>{
	promotionlist({type:activeName.value,page:1,size:10}).then(res=>{
		tableList.value=res.data.item
	})
}
onMounted(()=>{
	promotionlistapi()
})
const editadd=(val)=>{
	// promotioninfo({id:val.id}).then(res=>{
		router.push({name:'craeteCode',query:{id:val.id}})
	// })
}
</script>
<template>
	<div class="promote-wrap">
		<el-tabs type="border-card" v-model="activeName" @click="promotionlistapi()">
			<el-tab-pane name="1" label="添加客户">
				<el-table ref="multipleTableRef" border :data="tableList" style="width: 100%; margin-top: 16px">
					<el-table-column property="name" label="推广码名称" fixed width="140" />
					<el-table-column label="页面浏览总次数" property="browse_count"  />
					<el-table-column label="添加客户总数" property="add_count"  />
					<!-- <el-table-column label="创建人" >
						<template #default="scope">
							<div class="owner-name gray-broder">
								<el-icon><UserFilled class="people-icon" /></el-icon>
								<span style="margin-left: 5px">{{ scope.row.staff_name_list[0] }}</span>
							</div>
						</template>
					</el-table-column> -->
					<el-table-column label="推广成员" >
						<template #default="scope">
							<div class="owner-name gray-broder">
								<el-icon><UserFilled class="people-icon" /></el-icon>
								<span style="margin-left: 5px">{{ scope.row.staffs[0] }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column property="ctime" label="创建时间"  />
					<el-table-column label="活动状态" >
						<!-- <template #header>
							已发送成员
							<el-tooltip effect="light" placement="top">
								<template #content
									><div style="font-size: 14px; padding: 10px">
										管理员创建【企业微信朋友圈】时选择的<br />企业成员中已发表该朋友圈的成员
									</div>
								</template>
								<MyIcon name="Question" /> </el-tooltip
						></template>-->
						<template #default="scope"> <el-tag class="ml-2" type="info">{{scope.row.status == 1?'活动正常':'活动结束'}}</el-tag> </template>
					</el-table-column>

					<el-table-column label="操作" align="center" fixed="right" width="310">
						<template #default="scope">
							<div class="operation-btn">
								<span @click="share(scope.row)" style="color: #1890ff">分享</span><el-divider direction="vertical" />
								<!-- <span @click="emits('changeActiveKey', 2)" style="color: #1890ff">数据统计</span -->
								<!-- > -->
								<!-- <el-divider direction="vertical" /> -->
								<!-- <span @click="remindModelVisible = true" style="color: #1890ff">提醒领取</span
								> -->
								<!-- <el-divider direction="vertical" /> -->
								<span @click="todetails(scope.row)" style="color: #1890ff">详情</span
								><el-divider direction="vertical" />
								<el-dropdown  trigger="click">
									<span style="color: #1890ff"
										>编辑 <el-icon style="font-size: 12px"><CaretBottom /></el-icon
									></span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item command="editRow" @click="editadd(scope.row)">编辑</el-dropdown-item>
											<el-dropdown-item command="delRow" @click="delRow(scope.row)"> 删除 </el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</template>
					</el-table-column>
					<template #empty>
						<div class="table-null">
							<div class="table-null-box">
								<img style="margin: 0" src="../../../../assets/img/img/list-empty.499dbb25961c.png" />
								<p>没有搜索到相关的数据哦～</p>
								<div class="new-code">
									<el-icon style="font-size: 16px"><Plus /></el-icon> 创建推广码
								</div>
							</div>
						</div>
					</template>
				</el-table>
			</el-tab-pane>
			<el-tab-pane name="2" label="加入客户群">
				<el-table ref="multipleTableRef" border :data="tableList" style="width: 100%; margin-top: 16px">
					<el-table-column property="name" label="推广码名称" fixed width="140" />
					<el-table-column label="页面浏览总次数" property="browse_count"  />
					<el-table-column label="入群客户总数" property="add_count"  />
					<!-- <el-table-column label="创建人" >
						<template #default="scope">
							<div class="owner-name gray-broder">
								<el-icon><UserFilled class="people-icon" /></el-icon>
								<span style="margin-left: 5px">{{ scope.row.staff_name_list[0] }}</span>
							</div>
						</template>
					</el-table-column> -->
					<el-table-column label="推广成员" >
						<template #default="scope">
							<div class="owner-name gray-broder">
								<el-icon><UserFilled class="people-icon" /></el-icon>
								<span style="margin-left: 5px">{{ scope.row.staffs[0] }}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column property="ctime" label="创建时间"  />
					<el-table-column label="活动状态" >
						<!-- <template #header>
							已发送成员
							<el-tooltip effect="light" placement="top">
								<template #content
									><div style="font-size: 14px; padding: 10px">
										管理员创建【企业微信朋友圈】时选择的<br />企业成员中已发表该朋友圈的成员
									</div>
								</template>
								<MyIcon name="Question" /> </el-tooltip
						></template>-->
						<template #default="scope"> <el-tag class="ml-2" type="info">{{scope.row.status == 1?'活动正常':'活动结束'}}</el-tag> </template>
					</el-table-column>

					<el-table-column label="操作" align="center" fixed="right" width="310">
						<template #default="scope">
							<div class="operation-btn">
								<span @click="share(scope.row)" style="color: #1890ff">分享</span><el-divider direction="vertical" />
								<span @click="emits('changeActiveKey', 2)" style="color: #1890ff">数据统计</span
								><el-divider direction="vertical" />
								<span @click="remindModelVisible = true" style="color: #1890ff">提醒领取</span
								><el-divider direction="vertical" />
								<span @click="todetails(scope.row)" style="color: #1890ff">详情</span
								><el-divider direction="vertical" />
								<el-dropdown @command="handleCommand" trigger="click">
									<span style="color: #1890ff"
										>编辑 <el-icon style="font-size: 12px"><CaretBottom /></el-icon
									></span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item command="editRow" @click="editRow(scope.row)">编辑</el-dropdown-item>
											<el-dropdown-item command="delRow" @click="delRow(scope.row)"> 删除 </el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</template>
					</el-table-column>
					<template #empty>
						<div class="table-null">
							<div class="table-null-box">
								<img style="margin: 0" src="../../../../assets/img/img/list-empty.499dbb25961c.png" />
								<p>没有搜索到相关的数据哦～</p>
								<div class="new-code">
									<el-icon style="font-size: 16px"><Plus /></el-icon> 创建推广码
								</div>
							</div>
						</div>
					</template>
				</el-table></el-tab-pane
			>
		</el-tabs>
		<!-- <shareModel @showShareModel="showShareModel" ref="shareModels"  /> -->
		<remindModel @showModel="showRemindModelVisible" :modelVisible="remindModelVisible" />
		<detailsModel @showModel="showDetailsVisible" ref="detailsModels" />
		<el-dialog v-model="dialogVisible" title="提示" width="30%">
			<span>{{ isEdit ? '修改后所有投放渠道信息将都会更新，确认修改吗？' : '删除后不可恢复，确定删除吗？' }}</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog
			v-model="shareModelVisible"
			title="分享推广链接"
			@close="emits('showShareModel', false)"
			width="700px"
			:center="true"
		>
			<div class="link-body">
				<div class="header">
					<el-icon class="icon-wrap"><Bell /></el-icon>
					<p class="text">可将链接分享给推广码的推广成员，只有推广成员才可通过此链接领取专属海报</p>
				</div>
				<div class="share-dialog-content">
					<div class="qr-code">
						<div class="title">方式一</div>
						<div class="desc">推广链接二维码</div>
						<img
							:src="valuedata.image"
							class="qr-code-img"
						/>
					</div>
					<div class="promote-links">
						<div class="title">方式二</div>
						<div class="desc">推广链接</div>
						<div class="links-text" style="user-select: text">
							{{ valuedata.url}}
						</div>
					</div>
				</div>
				<div class="dialog-footer">
					<el-button @click="downloadCode">下载二维码</el-button>
					<el-button type="primary" @click="copyLink"> 复制推广链接 </el-button>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<style lang="scss" scoped>
@import '@/assets/style/groupManagement/codeCommon.scss';
.link-body {
	margin-top: -10px;
	.header {
		display: flex;
		align-items: center;
		width: 100%;
		height: 33px;
		padding-left: 16px;
		background-color: #effaff;
		color: rgba(0, 0, 0, 0.65);
		.icon-wrap {
			font-size: 16px;
			color: #1890ff;
		}
		.text {
			margin-left: 7px;
			font-size: 13px;
		}
	}
	.share-dialog-content {
		display: flex;
		margin-top: 24px;
		.title {
			font-size: 15px;
			font-weight: 600;
		}
		.title:before {
			content: '';
			display: inline-block;
			width: 4px;
			height: 14px;
			background-color: #1890ff;
			margin-right: 8px;
		}
		.desc {
			margin-top: 16px;
			margin-left: 12px;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.65);
		}
		.qr-code {
			position: relative;
			.qr-code-img {
				width: 154px;
				// height: 154px;
				margin-top: 12px;
				margin-left: 12px;
				background-color: #ddd;
			}
		}
		.qr-code:after {
			content: '';
			display: inline-block;
			position: absolute;
			left: 198px;
			top: 18px;
			width: 1px;
			height: 207px;
			background-color: #dedee0;
		}
		.promote-links {
			margin-left: 64px;
			.links-text {
				padding: 16px;
				margin-top: 12px;
				margin-left: 12px;
				width: 428px;
				height: 154px;
				border: 1px solid #d9d9d9;
				border-radius: 2px;
			}
		}
	}
	.dialog-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 32px;
	}
}
</style>
